<template>
  <!-- 歌单模块 -->
  <div class="mod-pls">
    <div class="container">
      <div class="pls-hd">
        <h3>
          <span class="pls-title">{{ cTitle }}</span>
        </h3>
        <a href="javascript:;" class="pls-classify">
          <el-button @click="classifyDrawer = true" plain size="small">
            选择分类
            <em class="el-icon-arrow-down"></em>
          </el-button>
        </a>
      </div>
      <!-- 右侧分类 -->
      <el-drawer
        class="pls-drawer"
        :title="cTitle"
        :with-header="false"
        :visible.sync="classifyDrawer"
      >
        <!--分类  -->
        <div class="drawer-box">
          <div class="drawer-normal">
            <el-button @click="itemClick" type="primary" plain
              >全部风格</el-button
            >
          </div>
          <div class="drawer-list">
            <h4>
              <span class="iconfont">&#xe8ae;</span>
              语种
            </h4>
            <ul class="drawer-list-ul clearfix">
              <li
                class="drawer-list-li"
                v-for="(item, index) in catlists[0]"
                :key="index"
              >
                <el-button
                  @click="changeTag(item)"
                  class="drawer-list-li-btn"
                  size="small"
                  round
                >
                  {{ item.name }}
                </el-button>
              </li>
            </ul>
          </div>
          <div class="drawer-list">
            <h4>
              <span class="iconfont">&#xe8ac;</span>
              风格
            </h4>
            <ul class="drawer-list-ul clearfix">
              <li
                class="drawer-list-li"
                v-for="(item, index) in catlists[1]"
                :key="index"
              >
                <el-button
                  @click="changeTag(item)"
                  class="drawer-list-li-btn"
                  size="small"
                  round
                >
                  {{ item.name }}
                </el-button>
              </li>
            </ul>
          </div>
          <div class="drawer-list">
            <h4>
              <span class="iconfont">&#xe8aa;</span>
              场景
            </h4>
            <ul class="drawer-list-ul clearfix">
              <li
                class="drawer-list-li"
                v-for="(item, index) in catlists[2]"
                :key="index"
              >
                <el-button
                  @click="changeTag(item)"
                  class="drawer-list-li-btn"
                  size="small"
                  round
                >
                  {{ item.name }}
                </el-button>
              </li>
            </ul>
          </div>
          <div class="drawer-list">
            <h4>
              <span class="iconfont">&#xe8ad;</span>
              情感
            </h4>
            <ul class="drawer-list-ul clearfix">
              <li
                class="drawer-list-li"
                v-for="(item, index) in catlists[3]"
                :key="index"
              >
                <el-button
                  @click="changeTag(item)"
                  class="drawer-list-li-btn"
                  size="small"
                  round
                >
                  {{ item.name }}
                </el-button>
              </li>
            </ul>
          </div>
          <div class="drawer-list">
            <h4>
              <span class="iconfont">&#xe8ab;</span>
              主题
            </h4>
            <ul class="drawer-list-ul clearfix">
              <li
                class="drawer-list-li"
                v-for="(item, index) in catlists[4]"
                :key="index"
              >
                <el-button
                  @click="changeTag(item)"
                  class="drawer-list-li-btn"
                  size="small"
                  round
                >
                  {{ item.name }}
                </el-button>
              </li>
            </ul>
          </div>
        </div>
      </el-drawer>
      <ul class="pls-lists clearfix">
        <li class="pls-item" v-for="(item, index) in topplaylists" :key="index">
          <c-play-list :item="item"></c-play-list>
        </li>
      </ul>
      <div class="pls-el-pagination" v-if="listsTotal > 35">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="listsTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import CPlayList from "components/classify/CPlayList.vue";
export default {
  data() {
    return {
      cTitle: "全部",
      itemname: "",
      classifyDrawer: false,
      currentPage: 1,
      pageSize: 35,
      listsTotal: 0,
      icon: 123,
      topplaylists: [],
      catlists: [[], [], [], [], []],
    };
  },
  components: {
    CPlayList,
  },
  mounted() {
    // console.log(this.$route.query.cat);
    if (this.$route.query.cat != undefined) {
      this.getTopPlaylist(this.$route.query.cat);
      this.cTitle = this.$route.query.cat;
      this.itemname = this.$route.query.cat;
    } else {
      this.getTopPlaylist();
      this.cTitle = "全部";
    }
    this.getCatlist();
    // this.getTopPlaylist();
  },
  methods: {
    itemClick() {
      this.$router.push("/playlists");
    },
    changeTag(item) {
      // 26行处传了个空的
      this.itemname = item ? item.name : "";
      // console.log(this.itemname);
      this.playPlaylists(this.itemname);
    },
    getCatlist() {
      this.axios({
        /* 歌单分类接口地址 */
        url: "/playlist/catlist",
      })
        .then((res) => {
          res.data.sub.forEach((item) => {
            this.catlists[item.category][this.catlists[item.category].length] =
              item;
          });
          console.log(this.catlists);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange() {
      // console.log(this.cTitle);
      // console.log(this.itemname);
      this.getTopPlaylist(this.itemname);
      // 点击分页后，页面滚动到歌单顶部
      document.documentElement.scrollTo({ top: 141, behavior: "smooth" });
    },
    getTopPlaylist(item) {
      item = item || "";
      console.log(item, "226");
      let tag = "&cat=" + encodeURIComponent(item);
      // console.log(tag);
      this.axios({
        /* 歌单（网友精选碟）接口地址 */
        url:
          "/top/playlist?limit=35&offset=" + (this.currentPage - 1) * 35 + tag,
      })
        .then((res) => {
          this.topplaylists = res.data.playlists;
          this.listsTotal = res.data.total;
          // console.log(this.topplaylists);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.mod-pls {
  padding-top: 50px;
  background-color: var(--color-theme-light-5);
}
.pls-hd {
  height: 50px;
}
.pls-hd h3 {
  float: left;
  font-size: 24px;
  font-weight: normal;
}
.pls-title {
  padding-right: 20px;
  padding-left: 20px;
}
.pls-lists {
  margin-right: -20px;
}
.pls-item {
  width: 20%;
  float: left;
}
.pls-el-pagination {
  position: relative;
  text-align: center;
  margin: 20px auto;
}
.el-drawer__container ::-webkit-scrollbar {
  display: none;
}

/* drawer */
.drawer-box {
  position: relative;
  padding: 20px;
}
.drawer-normal {
  margin-bottom: 20px;
}
.drawer-list h4 {
  font-size: 20px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
}
.drawer-list .iconfont {
  font-size: 20px;
}
.drawer-list-li {
  float: left;
  padding: 3px 5px;
}
/* .pls-drawer {
  width: 1528px;
} */
</style>